<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useForm } from "./utils/form";
import { formRules, formScoreRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import Motion from "@/views/login/utils/motion";

const {
  questionTypeRef,
  questionTableRef,
  scoreFormInline,
  queryPaperExtData,
  questionDataList,
  questionColumns,
  questionSelectRef,
  handleTypeChange,
  handleSelectionChange,
  countScoreAll,
  scoreAllRef,
  type0Ref,
  type1Ref,
  type2Ref,
  type3Ref
} = useForm();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    creater: "",
    name: "",
    type: 0,
    times: 90,
    score: 0,
    del: 0,
    addtime: "",
    updatetime: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

function getQuestionRef() {
  return questionSelectRef.value;
}

//
const scoreFormRef = ref();
function getScoreRef() {
  return scoreFormInline.value;
}

onMounted(() => {
  queryPaperExtData(newFormInline.value.id, newFormInline.value.type);
});

const onTypeChange = val => {
  queryPaperExtData(newFormInline.value.id, val);
};

defineExpose({ getRef, getScoreRef, getQuestionRef });

watch(questionSelectRef, newValue => {
  countScoreAll(newValue);
});

watch(scoreFormInline, () => {
  handleScoreFormChange();
});

watch(scoreAllRef, newValue => {
  setTimeout(function () {
    newFormInline.value.score = newValue;
  }, 300);
});

function handleScoreFormChange() {
  newFormInline.value.score =
    (scoreFormInline.value.type0 * 1 +
      scoreFormInline.value.type1 * 1 +
      scoreFormInline.value.type2 * 1 +
      scoreFormInline.value.type3 * 1) /
    1;
}
</script>

<template>
  <div class="flex justify-between">
    <div class="min-w-[500px] mr-2">
      <el-card>
        <template #header>
          <div class="font-medium">试卷信息</div>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="newFormInline"
          :rules="formRules"
          label-width="82px"
        >
          <Motion>
            <el-form-item label="试卷名称" prop="name">
              <el-input
                type="textarea"
                v-model="newFormInline.name"
                clearable
                placeholder="请输入试卷名称"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="试卷类型" prop="type">
              <el-radio-group
                v-model="newFormInline.type"
                @change="onTypeChange"
              >
                <el-radio :label="0">固定题型</el-radio>
                <el-radio :label="1">随机题型</el-radio>
              </el-radio-group>
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="时长" prop="times">
              <el-input
                v-model="newFormInline.times"
                clearable
                placeholder="请输入考试时长"
                :style="{ width: '220px' }"
              />(分钟)
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="总分" prop="score">
              <el-input
                v-model="newFormInline.score"
                readonly
                placeholder="请输入考试总分"
                :style="{ width: '220px' }"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="试卷状态" prop="del">
              <el-radio-group v-model="newFormInline.del">
                <el-radio :label="0">已启用</el-radio>
                <el-radio :label="1">已停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </Motion>
        </el-form>
      </el-card>
    </div>
    <div class="w-[calc(100%-500px)]">
      <h1 v-if="newFormInline.type == 0">
        <el-card>
          <template #header>
            <div class="font-medium">选择题型</div>
            <el-radio-group
              v-model="questionTypeRef"
              @change="handleTypeChange"
            >
              <el-radio :label="0"
                >判读题 <el-tag>{{ type0Ref }}</el-tag></el-radio
              >
              <el-radio :label="1"
                >单选题 <el-tag>{{ type1Ref }}</el-tag></el-radio
              >
              <el-radio :label="2"
                >多选题 <el-tag>{{ type2Ref }}</el-tag></el-radio
              >
              <el-radio :label="3"
                >案例分析 <el-tag>{{ type3Ref }}</el-tag></el-radio
              >
            </el-radio-group>
          </template>
          <Motion>
            <pure-table
              ref="questionTableRef"
              height="355"
              row-key="id"
              :header-cell-style="{
                background: '#f5f7fa',
                color: '#303133'
              }"
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :data="questionDataList"
              :columns="questionColumns"
              @selection-change="handleSelectionChange"
            />
          </Motion>
        </el-card>
      </h1>
      <h1 v-if="newFormInline.type == 1">
        <el-card>
          <template #header>
            <div class="font-medium">随机题型分值设置</div>
          </template>
          <el-form
            ref="scoreFormRef"
            :model="scoreFormInline"
            :rules="formScoreRules"
            label-width="82px"
            @change="handleScoreFormChange"
          >
            <Motion>
              <el-form-item label="判断题" prop="type0">
                <el-input
                  type="number"
                  v-model="scoreFormInline.type0"
                  placeholder="请输入判断题总分"
                  :style="{ width: '220px' }"
                />（分值）
              </el-form-item>
            </Motion>
            <Motion>
              <el-form-item label="单选题" prop="type1">
                <el-input
                  type="number"
                  v-model="scoreFormInline.type1"
                  placeholder="请输入单选题总分"
                  :style="{ width: '220px' }"
                />（分值）
              </el-form-item>
            </Motion>
            <Motion>
              <el-form-item label="多选题" prop="type2">
                <el-input
                  type="number"
                  v-model="scoreFormInline.type2"
                  placeholder="请输入多选题总分"
                  :style="{ width: '220px' }"
                />（分值）
              </el-form-item>
            </Motion>
            <Motion>
              <el-form-item label="案例分析" prop="type3">
                <el-input
                  type="number"
                  v-model="scoreFormInline.type3"
                  placeholder="请输入案例分析总分"
                  :style="{ width: '220px' }"
                />（分值）
              </el-form-item>
            </Motion>
          </el-form>
        </el-card>
      </h1>
    </div>
  </div>
</template>
